<template>
  <div class="home">
    <div class="fun">
      <el-button class="button" type="success" plain round @click="toDoc">
        查看文档
      </el-button>

      <el-button class="button" type="primary" plain round @click="toMapTest">
        map测试
      </el-button>

      <el-button class="button" type="primary" plain round @click="toMyUITest">
        MyUI测试
      </el-button>

      <el-button class="button" type="primary" plain round @click="toDragTest">
        Drag测试
      </el-button>

      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toGridLayout"
      >
        拖拽布局
      </el-button>

      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toResizeTest"
      >
        resize布局
      </el-button>

      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toGiantTreeTest"
      >
        giantTree
      </el-button>
      <el-button class="button" type="primary" plain round @click="toFlvDemo">
        flvDemo
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toVueDPlayerDemo"
      >
        VueDPlayer
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toDPlayerDemo"
      >
        DPlayerDemo
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toClusterDemo"
      >
        ClusterDemo
      </el-button>
      <el-button class="button" type="primary" plain round @click="toMyCluster">
        MyCluster
      </el-button>

      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toOceCluster"
      >
        OceCluster
      </el-button>
      <el-button class="button" type="primary" plain round @click="toWebSocket">
        webSocket
      </el-button>
      <el-button class="button" type="primary" plain round @click="toRowCol">
        row-col
      </el-button>
      <el-button class="button" type="primary" plain round @click="toGridDemo">
        GridDemo
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toDrawShapesDemo"
      >
        DrawShapes
      </el-button>
      <el-button class="button" type="primary" plain round @click="toXlsxDemo">
        XlsxDemo
      </el-button>

      <el-button class="button" type="primary" plain round @click="toWebWorker">
        webWorker
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toEventParamTest"
      >
        eventParamTest
      </el-button>
      <el-button class="button" type="primary" plain round @click="toFlvPlayer">
        flvPlayer
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toEventsDemo"
      >
        EventsDemo
      </el-button>
      <el-button class="button" type="primary" plain round @click="toXgPlayer">
        XgPlayer
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toSelfPlayer"
      >
        SelfPlayer
      </el-button>

      <el-button
        class="button"
        type="primary"
        plain
        round
        @click="toExtendDemo"
      >
        ExtendDemo
      </el-button>
      <el-button
        class="button"
        type="primary"
        plain
        round
        v-for="(item, index) in pages"
        :key="index"
        @click="routerTo(item.name)"
      >
        {{ item.buttonText }}
      </el-button>
    </div>
  </div>
</template>

<script>
import pages from './pages'

export default {
  name: 'Home',
  data() {
    return {
      pages: pages.pages,
    }
  },
  methods: {
    toDoc() {
      this.$router.push({ name: 'Doc' })
    },
    toMapTest() {
      this.$router.push({ name: 'MapTest' })
    },
    toMyUITest() {
      this.$router.push({ name: 'MyUITest' })
    },
    toDragTest() {
      this.$router.push({ name: 'DragTest' })
    },
    toGridLayout() {
      this.$router.push({ name: 'GridLayout' })
    },
    toResizeTest() {
      this.$router.push({ name: 'ResizeTest' })
    },
    toGiantTreeTest() {
      this.$router.push({ name: 'GiantTreeTest' })
    },
    toFlvDemo() {
      this.$router.push({ name: 'FlvDemo' })
    },
    toVueDPlayerDemo() {
      this.$router.push({ name: 'VueDPlayerDemo' })
    },
    toDPlayerDemo() {
      this.$router.push({ name: 'DPlayerDemo' })
    },
    toClusterDemo() {
      this.$router.push({ name: 'ClusterDemo' })
    },
    toMyCluster() {
      this.$router.push({ name: 'MyCluster' })
    },
    toOceCluster() {
      this.$router.push({ name: 'OceCluster' })
    },
    toWebSocket() {
      this.$router.push({ name: 'WebSocket' })
    },
    toRowCol() {
      this.$router.push({ name: 'RowCol' })
    },
    toGridDemo() {
      this.$router.push({ name: 'GridDemo' })
    },
    toDrawShapesDemo() {
      this.$router.push({ name: 'DrawShapesDemo' })
    },
    toXlsxDemo() {
      this.$router.push({ name: 'XlsxDemo' })
    },
    toWebWorker() {
      this.$router.push({ name: 'webWorkerDemo' })
    },
    toEventParamTest() {
      this.$router.push({ name: 'EventParamTest' })
    },
    toFlvPlayer() {
      this.$router.push({ name: 'FlvPlayer' })
    },
    toEventsDemo() {
      this.$router.push({ name: 'EventsDemo' })
    },
    toXgPlayer() {
      this.$router.push({ name: 'XgPlayer' })
    },
    toSelfPlayer() {
      this.$router.push({ name: 'SelfPlayer' })
    },
    toExtendDemo() {
      this.$router.push({ name: 'ExtendDemo' })
    },
    routerTo(name) {
      this.$router.push({ name })
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url('../assets/back.jpg') 100% 100% no-repeat;

  .fun {
    margin: 0 auto;
    padding-top: 100px;
    max-width: 1200px;

    .button {
      width: 150px;
      height: 50px;
      font-size: 16px;
      margin-top: 20px;
    }
  }
}
</style>
